<template>
  <div class="body">
    <div class="card">
      <h4 class="text">ʚ HitokotoCard ɞ</h4>
      <h5 class="text">{{ hitokoto }}</h5>
      <h5 class="text">-- {{ from }}</h5>
      <p class="text">
        使用 一言 @<a href="https://hitokoto.cn/"> https://hitokoto.cn/</a>
      </p>
    </div>
  </div>
</template>
<script lang="ts">
import { defineComponent } from "vue";
import axios from "../utils/axios";
export default defineComponent({
  data() {
    return {
      hitokoto: "" as String,
      from: "" as String,
    };
  },
  mounted() {
    axios
      .get("https://v1.hitokoto.cn/?c=a")
      //   .get("/api/hitokoto")
      // .get("/api/getUsers")
      .then((res) => {
        // this.ddata = `${res.data.hitokoto} --${res.data.from} `as String;
        this.hitokoto = `${res.data.hitokoto}` as String;
        this.from = `${res.data.from}` as String;
      })

      .catch((err) => {
        console.log(err);
      });
  },
});
</script>

<style lang="stylus" scoped>
.body {
  display: flex;
  justify-content: center;
}

.card {
  margin-top: 100px;
  margin-bottom: 100px;
  min-width: 300px;
  min-height: 180px;
  max-height: 300px;
  background: #eef3f7;
  box-shadow: 0px 15px 35px -5px rgba(50, 88, 130, 0.32);
  border-radius: 15px;
  padding: 30px;

  .text {
    color: #71829e;
  }
}
</style>